import { Button, Form, Input, Space, Tooltip } from 'antd';
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';
import { useStyles } from './styles';

interface Props {
  name: 'params' | 'headers';
  title: string;
}

const KeyValueList: React.FC<Props> = ({ name, title }) => {
  const { styles } = useStyles();

  return (
    <>
      <Form.Item className={styles.card}>
        <Form.List name={name}>
          {(fields, { add, remove }) => (
            <>
              <h4>{title}</h4>
              {fields.map((f) => (
                <Space key={f.key} className={styles.listItem}>
                  <Form.Item
                    name={[f.name, 0]}
                    noStyle
                    rules={[{ required: true }]}
                  >
                    <Input placeholder="键" />
                  </Form.Item>
                  <Form.Item
                    name={[f.name, 1]}
                    noStyle
                    rules={[{ required: true }]}
                  >
                    <Input placeholder="值" />
                  </Form.Item>
                  <Tooltip title="删除">
                    <DeleteOutlined
                      className={styles.deleteBtn}
                      onClick={() => remove(f.name)}
                    />
                  </Tooltip>
                </Space>
              ))}
              <Button
                type="dashed"
                onClick={() => add()}
                block
                icon={<PlusOutlined />}
              >
                添加
              </Button>
            </>
          )}
        </Form.List>
      </Form.Item>
    </>
  );
};

export default KeyValueList;
